import { leftConfigType, formConfigType, ElFormItemType } from "@/components"
import { InitMenuItemConfig } from "@/components/MyConfigTemplate/SetConfig"
import * as types from "./types"

import { ref } from "vue"
import { FormInstance, FormRules } from "element-plus"

/** 配置索引 */
enum CONFIG_INDEX {
    "定时任务配置" = 0,
}

enum formConfigLabel {
    ServerName = "服务名称",
    Interval = "时间间隔",
    TimeUnit = "时间单位",
    Enable = "是否启用",
}

const placeholderLabelMap = {
    ServerName: "请输入" + formConfigLabel.ServerName,
    Interval: "请输入" + formConfigLabel.Interval,
    TimeUnit: "请选择" + formConfigLabel.TimeUnit,
}

/** 左侧选项配置 */
const leftConfig: leftConfigType = {
    menuItemConfig: InitMenuItemConfig([CONFIG_INDEX[0]])
}

const formRef = ref<FormInstance>()
const rules: FormRules<types.SetConfigType> = {
    Interval: { required: true, message: placeholderLabelMap.Interval, trigger: "blur" },
    TimeUnit: { required: true, message: placeholderLabelMap.TimeUnit, trigger: "blur" },
}

// 表单编辑数据
const formData = ref<types.SetConfigType>({
    ServerName: "",
    Enable: false,
    Interval: 0,
    TimeUnit: ""
})

// 定时任务配置
const Config360ElFormItem: ElFormItemType = [
    {
        label: formConfigLabel.ServerName + ": ",
        children: [
            {
                model: "ServerName",
                placeholder: placeholderLabelMap.ServerName,
                clearable: true,
                disabled: true,
            }
        ]
    },
    {
        label: formConfigLabel.Interval + ": ",
        prop: "Interval",
        children: [
            {
                model: "Interval",
                inputIsNum: true,
                placeholder: placeholderLabelMap.Interval,
                clearable: true
            }
        ]
    },
    {
        label: formConfigLabel.TimeUnit + ": ",
        prop: "TimeUnit",
        children: [
            {
                model: "TimeUnit",
                type: "select",
                placeholder: placeholderLabelMap.TimeUnit,
                name: "TimeUnit",
            }
        ]
    },
    {
        label: formConfigLabel.Enable + ": ",
        children: [
            {
                model: "Enable",
                type: "switch",
                "active-text": "启用",
                "inactive-text": "禁用",
            }
        ]
    },
]

/** 右侧配置 */
const formConfig: formConfigType = [
    {
        header: CONFIG_INDEX[0],
        ElForm: [
            {
                model: formData.value,
                ref: formRef,
                rules,
                "label-position": "top",
                children: Config360ElFormItem
            }
        ]
    },
]

export {
    leftConfig, formConfig, formData, CONFIG_INDEX, formRef
}